<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/学成在线3.css">
    <title>学成在线布局示例</title>
</head>

<body>
    <!-- 头部导航 -->
    <header class="header">
        <div class="header-inner">
            <img src="./image/学成在线.png" alt="">
            <nav class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">就业指导</a></li>
                </ul>
            </nav>
            <div class="search">
                <input type="text" placeholder="请输入文字">
                <button></button>
            </div>
            <div class="user"><img src="https://www.loliapi.com/acg/pp/" alt=""><span>张三学前端</span></div>
        </div>
    </header>

    <!-- 主体内容 -->
    <main class="main">

        <!-- 中间banner及我的课程表区域 -->
        <div class="banner-section">
            <!-- 左侧导航 -->
            <aside class="sidebar">
                <ul>
                    <li><a href="#">前端开发</a></li>
                    <li><a href="#">后端开发</a></li>
                    <li><a href="#">移动开发</a></li>
                    <li><a href="#">人工智能</a></li>
                    <li><a href="#">商业预测</a></li>
                    <li><a href="#">云计算&大数据</a></li>
                    <li><a href="#">运维&测试</a></li>
                    <li><a href="#">UI设计</a></li>
                    <li><a href="#">产品</a></li>
                </ul>
            </aside>

            <div class="my-courses">
                <h3>我的课程表</h3>
                <ul>
                    <li>数据可视化课程<br><span>正在学习-</span><b>echarts使用步骤</b></li>
                    <li>Vue3医疗项目课程<br><span>正在学习-</span><b>认识组合式API</b></li>
                    <li>React核心技术课程<br><span>正在学习-</span><b>redux配合TS使用</b></li>
                    <li>全部课程</li>
                </ul>

            </div>
        </div>

        <!-- 精品推荐标签栏 -->
        <div class="tags-section">
            <ul class="tags">
                <li class="active">精品推荐</li>
                <li>HTML</li>
                <li>css</li>
                <li>JavaScript</li>
                <li>Node.js</li>
                <li>Ajax</li>
                <li>Vue2.0</li>
                <li>Vue3.0</li>
                <li>TypeScript</li>
                <li>React</li>
                <li class="modify-interest">修改兴趣</li>
            </ul>
        </div>

        <!-- 精品推荐课程列表 -->
        <div class="courses-section">
            <h3 class="section-title">精品推荐</h3>
            <a href="#" class="view-all">查看全部></a>
            <div class="courses-list">
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/js.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>JavaScript进阶面向对象ES6</h4>
                        <span>高级 · <em>1125人在学习</em></span>
                    </div>
                </div>
                <!-- 重复多个课程项-->
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/vue.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>Vue.js实战——面经全端项目</h4>
                        <span>高级 · <em>5125人在学习</em></span>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/vue2.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>玩转Vue全家桶，iHRM人力资源项目</h4>
                        <span>高级 · <em>2125人在学习</em></span>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/vue3.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>Vue.js实战医疗项目——优医问诊</h4>
                        <span>高级 · <em>6225人在学习</em></span>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/xtx.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>小程序实战：小兔鲜电商小程序项目</h4>
                        <span>高级 · <em>3825人在学习</em></span>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/flutter.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>前端框架Flutter开发实战</h4>
                        <span>高级 · <em>3125人在学习</em></span>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/react.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>熟练使用React.js——极客园H5项目</h4>
                        <span>高级 · <em>1235人在学习</em></span>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/react2.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>熟练使用React.js——极客园PC端项目</h4>
                        <span>高级 · <em>1525人在学习</em></span>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/fetch.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>前端实用技术，Fetch API 实战</h4>
                        <span>高级 · <em>1925人在学习</em></span>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <!-- 课程图片位置 -->
                        <div class="img-placeholder"><img src="./image/node.png" alt=""></div>
                    </div>
                    <div class="coures-hs">
                        <h4>前端高级Node.js零基础入门教程</h4>
                        <span>高级 · <em>8325人在学习</em></span>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

</html>